<template>
  <div id="main">
    <!-- 预警框 -->
    <div
      class="statusBarHeight greenBG padding-ho"
      @click="jumpWhere(`/pages/warningDetail/warningDetail`)"
      :style="{ height: statusBarHeight + 'px', paddingTop: statusBarTop + 'px' }"
    >
      <block v-if="earlyWarning.length > 0">
        <swiper autoplay :interval="3000" vertical :duration="500">
          <block v-for="(item, index) in earlyWarning" :key="index">
            <swiper-item>
              <view class="swiper-item">
                <rich-text :nodes="earlyWarningIcon"></rich-text>
                <span class="white-light oneLine-hidden">{{ item.title }}</span>
              </view>
            </swiper-item>
          </block>
        </swiper>
      </block>
      <block v-else>
        <div class="wMsg">
          <i class="alifont white-light">&#xe6a0;</i>
          <span class="white-light oneLine-hidden">天气貌似不错</span>
        </div>
      </block>
    </div>
    <!-- 搜索栏 -->
    <div class="headBox greenBG padding-ho">
      <div class="msgBox">
        <span
          class="miniFont white-light"
          @click="jumpWhere(`/pages/weatherDetail/weatherDetail`)"
          v-if="weatherInfo.temperature"
          >现在{{ weatherInfo.temperature }}℃ {{ weatherInfo.weather }}
          <rich-text :nodes="weatherIcon"></rich-text>
        </span>
        <span class="miniFont white-light" v-if="trafficInfo.evaluation">
          附近 {{ trafficInfo.evaluation.description }}
          <i class="alifont white-light" v-if="trafficInfo.evaluation.status == 0">&#xe833;</i>
          <i class="alifont white-light" v-if="trafficInfo.evaluation.status == 1">&#xe852;</i>
          <i class="alifont white-light" v-if="trafficInfo.evaluation.status == 2">&#xe7f9;</i>
          <i class="alifont white-light" v-if="trafficInfo.evaluation.status == 3">&#xe7df;</i>
        </span>
      </div>
      <div class="inputBox whiteBG">
        <div class="iconOne">
          <div>
            <div class="blueR"></div>
          </div>
          <div>
            <div class="orangeR"></div>
          </div>
        </div>
        <div class="input">
          <div class="bottom-white-light">
            <span class="miniFont gray">城市</span>
            <input type="text" placeholder="填入搜索城市" disabled value="珠海" />
          </div>
          <div>
            <span class="miniFont gray">线路</span>
            <input type="text" v-model="inputName" @confirm="selectLine" placeholder="填入路线如：1、26、23" />
          </div>
        </div>
        <button class="iconTwo gray-light2BG" @click="selectLine">
          <i class="alifont gray-drak">&#xe7e4;</i>
        </button>
      </div>
      <!-- <div class="scrollTip whiteBG">
        <div>
          <span>asdasdasdasasdadsa</span>
        </div>
      </div> -->
    </div>
    <!-- 信息显示 -->
    <div class="bodyBox whiteBG padding-ho">
      <!-- 收藏路线 -->
      <scroll-view scroll-x>
        <!-- 有线路收藏时 -->
        <div class="collBox" v-if="Like.length > 0">
          <div
            class="collBus border-white-light action blueBG"
            v-for="(item, index) in Like"
            :key="index"
            @click="goSelectByLike(item)"
          >
            <div>
              <i class="alifont gray-drak">&#xe7e4;</i>
            </div>
            <div>
              <span class="miniFont gray-drak">{{ item.A.routeName }}</span>
              <span class="miniFont gray-drak">{{ item.A.startStation }}-{{ item.A.endStation }}</span>
            </div>
          </div>
        </div>
        <!-- 无线路收藏时 -->
        <div class="collBox" v-else>
          <div class="collBus border-white-light action blueBG">
            <div>
              <i class="alifont gray-drak">&#xe7e4;</i>
            </div>
            <div>
              <span class="miniFont gray-drak">收藏线路</span>
              <span class="miniFont gray-drak">将会在这里看到</span>
            </div>
          </div>
        </div>
        <!-- 结束线路收藏时 -->
      </scroll-view>
      <!-- 查询路线信息 -->
      <div class="busBox">
        <div class="bus border-gray-light" v-for="(item, index) in LineArr" :key="index" @click="goSelect(item)">
          <div class="name blue-drak">{{ item.routeName }}</div>
          <div class="place oneLine-hidden">
            <i class="alifont yellow">&#xe832;</i>
            <span class="blue-drak">{{ item.startStation }}</span>
            <i class="alifont gray">&#xe7db;</i>
            <i class="alifont blue">&#xe832;</i>
            <span class="blue-drak oneLine-hidden">{{ item.endStation }}</span>
          </div>
          <div class="price">
            <i class="alifont green-drak">&#xe840;</i>
            <span class="green-drak">￥1</span>
          </div>
        </div>
      </div>
      <!-- 提示 -->
      <div class="tipNot">
        <span class="gray-light miniFont">{{ tip }}</span>
      </div>
    </div>
    <!-- 提醒收藏小程序 -->
    <div
      class="plaeseLike blackBG"
      :class="{ smallTipHidden: !smallTip }"
      @click="closeSmallTip"
      :style="{ top: bounding.bottom + 15 + 'px', right: tipRight + 'px' }"
    >
      <div class="triangle" :style="{ right: tipTriangleRight + 'px' }"></div>
      <span class="close white">x</span>
      <span class="detail white">加入我的小程序</span>
      <span class="detail white">使用更方便</span>
    </div>
    <!--  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      LineArr: {},
      inputName: '',
      weatherInfo: {},
      trafficInfo: {},
      bounding: {},
      Like: [],
      statusBarHeight: 0,
      statusBarTop: 0,
      tipRight: 0,
      tipTriangleRight: 0,
      earlyWarning: [],
      tip: '查一查呗',
      smallTip: false
    };
  },
  async onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        // console.log('getSystemInfo', res);
        let bounding = wx.getMenuButtonBoundingClientRect();
        // console.log('bounding', bounding);
        this.bounding = bounding;
        this.statusBarHeight = bounding.top + bounding.bottom - res.statusBarHeight + 10;
        this.statusBarTop = res.statusBarHeight;
        this.tipRight = res.screenWidth - bounding.right;
        this.tipTriangleRight = bounding.width * 0.75 - 15;
      }
    });
    uni.getStorage({
      key: 'frist-time',
      success: function(res) {
        // console.log('frist-time', res);
        if (res.data != 'no')
          uni.navigateTo({
            url: '/pages/userTip/userTip'
          });
      },
      fail: function(res) {
        uni.navigateTo({
          url: '/pages/userTip/userTip'
        });
      }
    });
    uni.getStorage({
      key: 'small-tip',
      success: (res) => {
        // console.log('small-tip', res);
        if (res.data != 'no') this.smallTip = true;
      },
      fail: (res) => {
        this.smallTip = true;
      }
    });
    this.getWarning();
    this.getLocation();
    uni.setStorageSync('storage_key', 'hello');
  },
  onShow() {
    this.getLike();
  },
  methods: {
    // 关闭右上角提示
    closeSmallTip() {
      this.smallTip = false;
      uni.setStorageSync('small-tip', 'no');
    },
    // 获取天气预警
    getWarning() {
      const db = wx.cloud.database();
      db.collection('earlyWarning')
        .get()
        .then((res) => {
          // console.log('earlyWarning', res)
          this.earlyWarning = res.data;
          // console.log('this.earlyWarning', this.earlyWarning)
        })
        .catch((err) => {
          // console.error('earlyWarning', err)
        });
    },
    // 获取收藏缓存
    getLike() {
      let storage = uni.getStorageSync('zhuhaiLike');
      console.log('zhuhaiLike', storage);
      this.Like = storage;
    },
    //
    jumpWhere(url) {
      uni.navigateTo({
        url
      });
    },
    // 点击收藏列表查询实时线路
    async goSelectByLike(item) {
      let url = `/pages/LineDetail/LineDetail`;
      let storage = uni.getStorageSync('zhuhaiLike');
      for (const i in storage) if (storage[i].mainID == item.mainID) storage.splice(i, 1);
      storage.unshift(item);
      this.$store.state.nowSelect = item;
      uni.setStorageSync('zhuhaiLike', storage);
      this.getLike();
      uni.navigateTo({
        url
      });
    },
    // 普通查询实时线路
    async goSelect(item) {
      let url = `/pages/LineDetail/LineDetail`;
      for (const key in this.LineArr)
        if (this.LineArr[key].routeName == item.routeName && this.LineArr[key].startStation != item.startStation)
          this.$store.state.nowSelect.B = this.LineArr[key];
      this.$store.state.nowSelect.A = item;
      this.$store.state.nowSelect.mainID = item.segmentId;
      uni.navigateTo({
        url
      });
    },
    // 查找线路
    async selectLine() {
      if (this.inputName == '') return;
      uni.showLoading({
        title: '加载中'
      });
      wx.cloud
        .callFunction({
          name: 'http',
          data: {
            url: `${this.$store.state.httpRouteList}routeName=${this.inputName}`
          }
        })
        .then((res) => {
          // console.log(res)
          if (res.result.routes) {
            this.LineArr = res.result.routes;
          } else {
            this.LineArr = [];
            this.tip = res.result.resultMsg;
          }
          uni.hideLoading();
        })
        .catch((err) => {
          uni.showToast({
            title: err.toString(),
            icon: 'none',
            duration: 2000
          });
        });
    },
    // 获得定位
    async getLocation() {
      let [error, location] = await uni.getLocation({
        type: 'wgs84'
      });
      this.$store.state.location = location;
      this.getCityInfo(location);
      this.getTrafficInfo(location);
      // console.log('location', this.$store.state.location);
    },
    // 获得所在城市信息
    async getCityInfo(location) {
      let locationNow = `${location.longitude},${location.latitude}`;
      var [error, res] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/geocode/regeo?key=${this.$store.state.amapWebKey}&location=${locationNow}&extensions=base&batch=false&roadlevel=1`
      });
      this.$store.state.cityInfo = res.data.regeocode;
      this.getWeatherInfo();
      // console.log('cityInfo', this.$store.state.cityInfo);
    },
    // 获得所在城市天气状态
    async getWeatherInfo() {
      var [error, res] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/weather/weatherInfo?city=${this.$store.state.cityInfo.addressComponent.adcode}&key=${this.$store.state.amapWebKey}`
      });
      this.$store.state.weatherInfo = res.data.lives[0];
      this.weatherInfo = res.data.lives[0];
      // console.log('weatherInfo', this.$store.state.weatherInfo);
    },
    // 获得用户附近交通状态
    async getTrafficInfo(location) {
      let locationNow = `${location.longitude},${location.latitude}`;
      var [error, res] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/traffic/status/circle?key=${this.$store.state.amapWebKey}&location=${locationNow}&radius=1000`
      });
      this.$store.state.trafficInfo = res.data.trafficinfo;
      this.trafficInfo = res.data.trafficinfo;
      // console.log('trafficInfo', this.$store.state.trafficInfo);
    }
  },
  computed: {
    earlyWarningIcon() {
      return `<i class="alifont white-light">&#xe69b;</i>`;
    },
    weatherIcon() {
      let icon = '<i class="alifont white-light">',
        val = this.weatherInfo.weather;
      if (val == '晴') icon += '&#xe689;';
      else if (val == '阴') icon += '&#xe68c;';
      else if (val == '多云' || val == '晴间多云') icon += '&#xe68b;';
      else if (val == '少云') icon += '&#xe68a;';
      else if (val == '小雨') icon += '&#xe68d;';
      else if (val == '中雨') icon += '&#xe68e;';
      else if (val == '大雨') icon += '&#xe68f;';
      else if (val == '暴雨' || val == '大暴雨' || val == '特大暴雨' || val == '极端降雨') icon += '&#xe690;';
      else if (val == '阵雨' || val == '强阵雨') icon += '&#xe692;';
      else if (val == '雷阵雨' || val == '强雷阵雨' || val == '雷阵雨并伴有冰雹') icon += '&#xe693;';
      else icon += '&#xe68a;';
      icon += `</i>`;
      // console.log(val, icon);
      return icon;
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.plaeseLike {
  position: absolute;
  padding: 28rpx 40rpx;
  padding-top: 30rpx;
  border-radius: 16rpx;
  transition: all 0.3s;
  .triangle {
    position: absolute;
    top: -24rpx;
    width: 0;
    height: 0;
    border-width: 30rpx;
    border-top-width: 0;
    border-style: solid;
    border-color: transparent transparent #303133 transparent;
  }
  .close {
    position: absolute;
    right: 14rpx;
    top: 6rpx;
    font-size: 32rpx;
    line-height: 30rpx;
  }
  .detail {
    display: block;
    font-size: 26rpx;
    text-align: center;
  }
}
.smallTipHidden {
  opacity: 0;
  visibility: hidden;
}
.statusBarHeight {
  padding-right: 230rpx;
  border: 1rpx solid #44c07a;
  swiper {
    height: 100%;
    width: 100%;
  }
  .swiper-item {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    .he {
      height: 50rpx;
      line-height: 50rpx;
    }
    rich-text {
      .he;
    }
    span {
      display: block;
      width: 100%;
      font-size: 30rpx;
      font-weight: bold;
      .he;
    }
  }
  .wMsg {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    .he {
      height: 50rpx;
      line-height: 50rpx;
    }
    span {
      font-size: 30rpx;
      font-weight: bold;
    }
    i {
      padding-bottom: 6rpx;
    }
  }
}
.headBox {
  padding-bottom: 120rpx;
  border: 1rpx solid #44c07a;
  flex-shrink: 0;
  .msgBox {
    display: flex;
    justify-content: space-between;
    margin: 0 0 30rpx;
    padding-top: 10rpx;
    .he {
      height: 50rpx;
    }
    rich-text {
      .he;
    }
    span {
      display: flex;
      align-items: center;
    }
    i {
      margin-left: 4rpx;
    }
  }
  .inputBox {
    padding: 26rpx 40rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.11);
    .input {
      flex-grow: 1;
      & > div {
        padding: 10rpx 0;
      }
      input {
        width: 100%;
        margin: 6rpx 0;
        font-weight: bold;
      }
    }
    .iconOne {
      flex-shrink: 0;
      margin-right: 20rpx;
      align-self: stretch;
      & > div {
        height: 50%;
        padding-top: 20rpx;
        & > div {
          height: 50%;
          border-radius: 100%;
          @R: 32rpx;
          height: @R;
          width: @R;
          border: 8rpx solid #ffffff;
        }
        .blueR {
          border-color: #09acfe;
          background-color: #dbf3ff;
        }
        .orangeR {
          border-color: #f9650c;
          background-color: #fee0ce;
        }
      }
    }
    .iconTwo {
      margin-left: 20rpx;
      flex-shrink: 0;
      border-radius: 14rpx;
      padding: 14rpx;
    }
  }
  .scrollTip {
    margin-top: 30rpx;
    padding: 26rpx 40rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.11);
  }
}
.bodyBox {
  margin-top: -80rpx;
  border-radius: 80rpx 80rpx 0 0;
  min-height: 200rpx;
  box-shadow: 0rpx -6rpx 24rpx rgba(0, 0, 0, 0.11);
  padding-top: 60rpx;
  flex-grow: 1;
  scroll-view {
    width: 100%;
  }
  .collBox {
    display: flex;
    padding-bottom: 50rpx;
    .collBus {
      flex-shrink: 0;
      display: flex;
      margin-right: 24rpx;
      border-radius: 20rpx;
      padding: 20rpx;
      & > div {
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
      & > div:first-child {
        margin-right: 8rpx;
      }
      .alifont {
        font-size: 40rpx;
        height: 40rpx;
      }
      .miniFont {
        font-size: 24rpx;
      }
    }
    .action {
      box-shadow: 0rpx 6rpx 24rpx rgba(9, 172, 254, 0.314);
      .gray-drak {
        color: #ffffff;
      }
      i {
        font-weight: lighter;
      }
    }
  }
  .busBox {
    display: flex;
    flex-direction: column;
    .bus {
      border-radius: 30rpx;
      padding: 20rpx 26rpx;
      height: 110rpx;
      display: flex;
      align-items: flex-end;
      position: relative;
      margin-bottom: 26rpx;
      .name {
        align-self: center;
        font-weight: bolder;
        flex-shrink: 0;
        font-size: 44rpx;
        width: 180rpx;
      }
      .place {
        flex-grow: 1;
        display: flex;
        align-items: center;
        span {
          font-size: 28rpx;
        }
        i {
          font-size: 32rpx;
          height: 32rpx;
          flex-shrink: 0;
        }
      }
      .price {
        position: absolute;
        right: 26rpx;
        top: 14rpx;
        display: flex;
        align-items: center;
        i {
          font-size: 34rpx;
          height: 34rpx;
        }
        span {
          transform: translateY(2rpx);
          height: 30rpx;
          line-height: 30rpx;
          font-size: 24rpx;
        }
      }
    }
  }
  .tipNot {
    display: flex;
    justify-content: center;
    padding: 30rpx 0;
    span {
      letter-spacing: 4rpx;
      text-indent: 4rpx;
    }
  }
}
</style>
